<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
<link rel="icon" href="./images/favicon.jpg">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">

<title>索尔云员工信息系统</title>

<style type="text/css">
/* 为html元素直接指定样式 */
html{
	height:100%;/*定义高度，相对于父元素100%,html的父元素是浏览器窗口的可见部分*/
}

/* 为body元素直接指定样式 */
body{
	height:100%;
}




/*定义了一个样式类，类名称为my-container */
.my-container{
	width:100%;/*定义宽度，相对于父元素100%*/
	height:100%;/*定义高度，相对于父元素100%*/
	background-color:#AAFFAA;/*定义背景颜色*/
	
	display:flex;/*将本元素定义为一个可灵活布局的容器，则内部元素的布局可以灵活操控*/
	flex-direction: row;/*本flex容器中的元素按行排列*/
	
}

.my-nav{
	flex:none;/*当本元素处于flex容器中时，保持原始大小，不伸缩*/
	width:200px;
	height:100%;
	background-color:white;
	
	border-right:1px solid #DDDDDD;/*设置本元素的右边框：1像素 细实线 浅灰色*/
	box-shadow:0px 0px 5px 1px #DDDDDD;  	/*设置边框阴影 左偏移0，右偏移0，模糊5px,向外扩展1px,颜色浅灰*/
}

.my-main{
	flex:auto;/*当本元素处于flex容器中时，自动伸缩*/
	background-color:white;
	
	
	display:flex;
	flex-direction: column;/*纵向排列*/

}

.my-top{
	flex:none;
	width:100%;
	height:50px;
	
	display:flex;
	flex-direction: row;
	
	position:relative;/*设置本元素为子元素定位基准*/
}

.my-content{
	flex:auto;
}

.my-bottom{
	flex:none;
	width:100%;
	height:30px;
	
	font-size:14px;
	line-height:30px;
	text-align:center;/*文字水品居中*/

}

.my-contentFrame{
	width:100%;
	height:100%;
	border:none;
}



.fade-enter-active, .fade-leave-active {
  transition: width .5s;
}
.fade-enter, .fade-leave-to{
  width: 0;
  
}


</style>

</head>
<body style="height:100% !important;">



<div id="app" class="my-container" >
	
	<!-- transition 表示产生过渡效果 -->
	<transition name="fade">
		<!-- v-show="navShow" 表示：如果navShow为true则改div显示，否则不显示 -->
		<div v-show="navShow" class="my-nav">
		
			<div style="height:70px;line-height:70px;" class="text-center">
				<img src="images/favicon.jpg" style="height:24px;" class="align-middle"/>
				<span style="font-size:24px;font-family: 楷体;font-weight:bold;"  class="align-middle text-secondary">员工管理</span>
			</div>
		
			<div class="list-group" id="my-menu">
			  <a href="#" data-toggle="collapse" data-target="#my-secutiry" class="list-group-item list-group-item-action border-0">安全管理</a>
			  	<div id="my-secutiry" class="list-group collapse" data-parent="#my-menu">
				  <a href="#" @click="chooseMenu('安全管理','密码修改')" class="list-group-item list-group-item-action border-0 pl-5">密码修改</a>
				  <a href="#" @click="chooseMenu('安全管理','密码重置')" class="list-group-item list-group-item-action border-0 pl-5">密码重置</a>
				  <a href="#" @click="chooseMenu('安全管理','用户管理')" class="list-group-item list-group-item-action border-0 pl-5">用户管理</a>
				  <a href="photo.html" target="contentFrame" @click="chooseMenu('安全管理','我的头像')" class="list-group-item list-group-item-action border-0 pl-5">我的头像</a>
				</div>
			  <a href="#" data-toggle="collapse" data-target="#my-emp" class="list-group-item list-group-item-action border-0">员工信息</a>
			  	<div id="my-emp" class="list-group collapse" data-parent="#my-menu">
				  <a href="dep.html" target="contentFrame" @click="chooseMenu('员工信息','部门管理')" class="list-group-item list-group-item-action border-0 pl-5">部门管理</a>
				  <a href="#" @click="chooseMenu('员工信息','员工管理')" class="list-group-item list-group-item-action border-0 pl-5">员工管理</a>
				</div>
			</div>
		
		
		</div>
	</transition>
	
	<div class="my-main">
		<div class="my-top bg-light">
			<button @click="switchNav" type="button" class="btn btn-light ml-2 my-1 "><i class="fa fa-bars"></i></button>
			<nav>
			  <ol class="breadcrumb bg-light">
			    <li class="breadcrumb-item"><a href="#">主页</a></li>
			    <!-- v-if="currentMenu.one" 表示当前是否存在选中的一级菜单，若存在生成当前元素 -->
			    <li v-if="currentMenu.one" class="breadcrumb-item"><a href="#">{{currentMenu.one}}</a></li>
			    <li v-if="currentMenu.two" class="breadcrumb-item active">{{currentMenu.two}}</li>
			  </ol>
			</nav>
			
			<!-- position:absolute;表示相对于设置了定位基准的父元素定位 -->
			<div style="position:absolute;right:10px;bottom:5px;font-size:14px;">
				<span><img id="currphoto" src="curr-photo" style="width:36px;height:36px;border-radius:18px;" class="mr-1" />当前用户：{{currUser.u_name}}</span>
				&nbsp;&nbsp;
				<!-- @click.prevent 表示单击时阻止组件的默认行为（即阻止超链跳转href指向的地址） -->
				<a href="#" @click.prevent="logout"  >退出</a>
			</div>
			
			
		</div>
		<!-- iframe是内嵌框架，即嵌入窗口中的窗口 -->
		<div class="my-content"><iframe class="my-contentFrame" name="contentFrame" ></iframe></div>
		<div class="my-bottom bg-light text-secondary">
			技术支持：&copy;西安索尔科技软件有限责任公司
		</div>		
	</div>


</div>


<script src="./js/jquery.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./layer/layer.js"></script>
<script src="./js/sweetalert2.all.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/request.js"></script>

<script type="text/javascript">
new Vue({
	el:'#app',
	data:{
		navShow:true,//导航是否显示，该变量控制导航菜单是否显示
		currentMenu:{//当前选中的菜单
			one:'',
			two:''
		},
		currUser:{},//当前用户信息
	},
	methods:{
		switchNav(){
			//本函数将变量navShow的值取反
			this.navShow = !this.navShow;			
		},
		
		//选中菜单
		chooseMenu(one,two){
			
			this.currentMenu = {one,two};
			
		},
		//退出系统
		logout(){
			http_post('logout',{},{postMsg:true}).then(()=>{
				window.sessionStorage.removeItem('CurrUser');//清除当前用户信息
				window.location.href='index.html';
			});
		}
	},
	mounted(){
		const currUserStr = window.sessionStorage.getItem("CurrUser");	
		console.log("====>",currUserStr);
		this.currUser = JSON.parse(currUserStr);//将（json）字符串解析为对象
	}
});


</script>



</body>
</html>


